<template>
  <div class="layout">
    <van-sticky>
      <van-nav-bar title="扫码追溯" left-arrow @click-left="onClickLeft" />
    </van-sticky>
    <div class="details">
      <p>
        <span>医废袋编号</span>
        <span>YFD12356</span>
      </p>
      <p>
        <span>医废袋种类</span>
        <span>感染性医废</span>
      </p>
      <p>
        <span>医废袋重量</span>
        <span>30kg</span>
      </p>
    </div>
    <div class="setp-div">
      <van-steps direction="vertical" :active="-1" :space="50">
        <van-step>
          <div class="setp-details">
            <p class="info-title">收集人到达XX科室</p>
            <div class="details-info">
              <div>
                <p>收集人：李四 电话：18185664745</p>
              </div>
              <div class="details-time">
                <p>08-20 09：53</p>
              </div>
            </div>
          </div>
        </van-step>
        <van-step>
          <div class="setp-details">
            <p class="info-title">交接人已确认</p>
            <div class="details-info">
              <div>
                <p>交接人：张三 电话：13548689868</p>
              </div>
              <div class="details-time">
                <p>08-20 09：53</p>
              </div>
            </div>
          </div>
        </van-step>
        <van-step>
          <div class="setp-details">
            <p class="info-title">袋箱绑定</p>
            <div class="details-info">
              <p>医废箱识别码：YLS20486565226</p>
              <div class="details-time">
                <p>08-20 09：53</p>
              </div>
            </div>
          </div>
        </van-step>
        <van-step>
          <div class="setp-details">
            <p class="info-title">院内暂存</p>
            <div class="details-info">
              <div>
                <p>暂存地：医院北楼暂存地</p>
                <p>交接人：王五 电话：13158986589</p>
                <p>医废重量：30kg（无异常）</p>
              </div>
              <div class="details-time">
                <p>08-20 09：53</p>
                <p>08-20 09：53</p>
                <p>08-20 09：53</p>
              </div>
            </div>
          </div>
        </van-step>
        <van-step>
          <div class="setp-details">
            <p class="info-title">院内出库</p>
            <div class="details-info">
              <div>
                <p>交接人：赵六 电话：13458986589</p>
                <p>医废重量：30kg（无异常）</p>
              </div>
              <div class="details-time">
                <p>08-20 09：53</p>
                <p>08-20 09：53</p>
              </div>
            </div>
            <p style="color:#007BF5;font-size:17px">查看转运路线图</p>
          </div>
        </van-step>
        <van-step>
          <div class="setp-details">
            <p class="info-title">院外暂存</p>
            <div class="details-info">
              <div>
                <p>暂存地：XX街道暂存地</p>
                <p>交接人：钱七 电话：15895689898</p>
                <p>医废重量：30kg（无异常）</p>
              </div>
              <div class="details-time">
                <p>08-20 09：53</p>
                <p>08-20 09：53</p>
                <p>08-20 09：53</p>
              </div>
            </div>
          </div>
        </van-step>
        <van-step>
          <div class="setp-details">
            <p class="info-title">院外处理</p>
            <div class="details-info">
              <div>
                <p>处置地：XX街道处理医废地</p>
                <p>交接人：周八 电话：19689895874</p>
                <p>医废重量：30kg（无异常）</p>
              </div>
              <div class="details-time">
                <p>08-20 09：53</p>
                <p>08-20 09：53</p>
                <p>08-20 09：53</p>
              </div>
            </div>
          </div>
        </van-step>
      </van-steps>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped lang="less">
.layout {
  box-sizing: border-box;
  width: 100vw;
  min-height: 100vh;
  background-color: #f2f2f2;
  .details {
    margin: 17px 16px 0px;
    background-color: #fff;
    font-size: 17px;
    padding: 16px 0;
    p {
      margin-left: 14px;
      span {
        color: #333333;
        &:nth-child(1) {
          color: #707070;
        }
        &:nth-child(2) {
          margin-left: 30px;
        }
      }
    }
  }
  .setp-div /deep/ .van-steps,
  .setp-div /deep/ .van-step__icon--active,
  .van-step__title--active {
    background-color: #f2f2f2;
    color: #fff;
  }
  //   .setp-div /deep/ .van-step--vertical .van-step__circle-container{
  //       width: 20px;
  //       height: 20px;
  //   }
  .setp-div /deep/ .van-icon {
    font-size: 20px;
  }
  .setp-div /deep/ .van-step--finish .van-step__line {
    background-color: #ebedf0;
  }
  .setp-div /deep/ .van-step__circle {
    width: 20px;
    height: 20px;
    background-color: #fff;
  }

  .setp-div {
    margin-top: 34px;
    .setp-details {
      background-color: #fff;
      padding: 12px 10px;
      .info-title {
        color: #333333;
        font-size: 16px;
      }
      .details-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
        color: #333333;
      }
      .details-time {
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
</style>